fix: improve hero section alignment and responsiveness#476
Conversation
❌ Deploy Preview for github-spy failed.
|
|
Warning Review limit reached
More reviews will be available in 50 minutes and 16 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. 📝 WalkthroughWalkthroughThe Hero component receives a comprehensive UI refresh: the hero section layout, padding, and background grid gradient are adjusted; dashboard card styling is updated with revised background opacity, borders, and hover effects; the Weekly Commits progress bar animation is refined; and the Contribution Matrix cell color logic is simplified to use a single intensities array. Floating GitHub icon nodes are repositioned and their animation staggering is refactored to use inline styles. ChangesHero Component Redesign
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @shreyasingh260 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Hero.tsx`:
- Around line 125-141: These decorative icon wrappers (the divs wrapping
GitBranch, GitCommit, GitPullRequest in Hero.tsx) should be non-interactive and
respect reduced-motion: replace the plain "animate-bounce" class with
motion-safe:animate-bounce and motion-reduce:animate-none, add
"pointer-events-none" to prevent accidental hits, and mark them for AT as
decorative by adding aria-hidden="true" and role="presentation" (or
tabIndex={-1} if needed); apply the same changes to the three divs containing
GitBranch, GitCommit and GitPullRequest.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
|
Implemented alignment and responsiveness improvements for the Hero section while preserving the original UI, animations, and overall design consistency. |
|
🎉🎉 Thank you for your contribution! Your PR #476 has been merged! 🎉🎉 |
2 participants
Related Issue - Closes: #455
Description
This PR fixes the alignment inconsistency in the Hero section on normal/laptop screen sizes. While the layout appears correct in full-screen mode, in normal view the hero content was pushed too far downward, causing excessive empty space at the top. This update corrects the vertical alignment and ensures a consistent and balanced layout across different screen sizes.
How Has This Been Tested?
Screenshots
Before and after screenshots attached showing the alignment fix.
Before
After
Type of Change
Summary by CodeRabbit
Release Notes